*{
	padding: 0;
	margin: 0;
	font-size: 12px;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
.black{
	color: black;
}
.grey{
	color: #999;
}
.bgrey{
	color: #666;
}
.red{
    color: #c20c0c;
}
.bold{
	font-weight: bold;
}
.main{
	background: url(../img/chart-background.png) repeat-y;
	width: 980px;
	border:1px solid #D3D3D3 ;
	border-top: 0;
	display: flex;
	margin:0 auto;
	height:4500px;
}
#main-left{
	width: 240px;
	padding-top: 20px;
}
#main-right{
	width: 740px;
}
.chart-list h3{
	font-size: 14px;
	padding: 20px 10px 12px 15px;
	font-family: simsun,\5b8b\4f53;
}
.chart-list .choose{
	background-color: #e6e6e6;
}
.chart-list .choose:hover{
	background-color: #e6e6e6;
}
.chart-item {
	display: inline-block;
	width:220px;
	padding: 10px 0 10px 20px;
}
.chart-item:hover
{
	background: #f4f2f2;
}
.chart-item img{
	display: inline-block;
	height: 40px;
	width: 40px;
	float: left;
}
.chart-item p{
	width:170px;
	float:right;
	line-height: 20px;
	height: 20px;
}
#chart-header{
	padding:40px;
	width: 600px;
	display: flex;
}
#chart-header .img-wrap{
	width:150px;
	height: 150px;
	padding: 3px;
	border: 1px solid #ccc;
}
#chart-header .header-right{
	padding-left:30px;
}
#chart-header .img-wrap img{
	width:150px;
	height: 150px;
}
#chart-header h2{
	font-size: 20px;
	font-weight: 200;
	line-height: 50px;
}
.clock-icon{
	width: 13px;
	height: 13px;
	margin-right: 5px;
	margin-top:1px;
	background: url(../img/icon3.png) no-repeat  -18px -682px;
	float:left;

}
.button-list{
	padding-top:30px;
	width: 500px;
	display: flex;
}
.button-list .play-add .play{
	display: inline-block;
	width: 66px;
	height: 31px;
	background: url(../img/icon6.png) no-repeat right -428px;
}
.button-list .play-add .play :hover{
	background-position:right -510px;
}
.button-list .play-add .play:hover .play1 {
	background-position:0 -469px;
}
.button-list .play-add .play:hover .play1 .play-icon {
	background-position:-28px -1622px;
}
.button-list .play-add .play .play1{
	display: inline-block;
	width: 62px;
	height:31px;
	background: url(../img/icon6.png) no-repeat 0 -387px;
	color: white;
	line-height: 31px;
	float: left;
}

.button-list .play-add .play .play1 .play-icon{
	background: url(../img/icon6.png) no-repeat 0 -1622px;
	display: inline-block;
	width: 20px;
	height: 18px;
	margin:7px 2px 0 8px;
	float: left;
}
.button-list .play-add .add{
	display: inline-block;
	width: 31px;
	height: 31px;
	margin-left: -7px;
	line-height: 31px;
	background: url(../img/icon6.png) no-repeat 0 -1588px;
}
.button-list .play-add .add:hover{
	background-position:-40px -1588px;
}
.button-list .button{
	display: inline-block;
	height:31px;
	background: url(../img/icon6.png) no-repeat 0 -977px;
	margin-left: 10px;
}
.button-list .button:nth-child(2){
	margin-left: 5px;
}
.button-list .button:nth-child(2):hover{
	background-position:  0 -1063px !important;
}
.button-list .button:nth-child(3):hover{
	background-position:  0 -1268px !important;
}
.button-list .button:nth-child(4):hover{
	background-position:  0 -2805px !important;
}
.button-list .button:nth-child(5):hover{
	background-position:  0 -1508px !important;
}
.button-list .button:hover span{
	background-position:  right -1106px;
}
.button-list .button .icon{
	height:31px;
	min-width: 23px;
	display: inline-block;
	float: left;
	padding-right:7px;
}
.button-list .button span{
	height:31px;
	margin-right: -5px;
	padding-right:7px;
	display: inline-block;
	line-height: 31px;
	background: url(../img/icon6.png) no-repeat right -1020px;
}
#main-right .tital{
	margin-left:40px;
	border-bottom: 2px solid #c20c0c;
	width: 670px;
	height:30px;
}
#main-right .tital h2{
	font-size: 20px;
	font-weight: 200;
	display: inline-block;
}
#main-right .tital .num{
	margin-left:20px;
}
#main-right .tital .playtimes{
	position: relative;
	margin-left: 418px;
}
#main-right table{
	width: 670px;
	margin-left: 40px;
	border: 1px solid #d9d9d9;
	border-collapse:collapse;
	text-align: left;
}
#main-right table th{
	box-sizing: border-box;
	padding-left: 10px;
}
#main-right table thead tr{
	background: url(../img/table.png) repeat-x 0 0 ;
	height: 37px; 
}
#main-right table th:nth-child(1){
	width: 78px;
	border-right: 1px solid #D9D9D9;
}
#main-right table th:nth-child(2){
	border-right: 1px solid #D9D9D9;
	width: 327px;
}
#main-right table th:nth-child(3){
	border-right: 1px solid #D9D9D9;
	width: 91px;
}
#main-right table th:last-child{
	border: 0;
}
#main-right tbody tr:nth-child(2n+1){
	background-color: #f7f7f7;
}
#main-right tbody tr:hover .long{
	display: none;
} 
#main-right tbody tr:hover .icon-list{
	display: block;
}
#main-right tbody .black{
	white-space: nowrap;
	text-overflow: ellipsis;
	display: inline-block;
	overflow: hidden;
}
#main-right table td{
	padding: 10px;
}
#main-right table td:nth-child(1){
	width: 58px;
}
#main-right table td:nth-child(2){
	width: 307px;
}
#main-right table td:nth-child(3){
	width: 71px;
	padding-right: 0;
}
#main-right table td:nth-child(4){
	width: 153px;
}
#main-right table .rank{
	color: #999;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 10px;
	display: inline-block;
}
#main-right table .new_icon{
	background: url(../img/icon3.png) no-repeat -67px -283px;
	width: 16px;
	height: 17px;
	display: inline-block;
	float:right;
}
#main-right table .up{
	background: url(../img/icon3.png) no-repeat -74px -299px;
	height: 17px;
	line-height: 18px;
	display: inline-block;
	float:right;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #bb2128;
}
#main-right table .stay{
	background: url(../img/icon3.png) no-repeat -74px -268px;
	height: 17px;
	line-height: 18px;
	display: inline-block;
	float:right;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
}
#main-right table .down{
	background: url(../img/icon3.png) no-repeat -74px -318px;
	height: 17px;
	line-height: 18px;
	display: inline-block;
	float:right;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #d33a31;
}
#main-right table .cover{
	display: inline-block;
	float:left;
	padding-right: 10px;
	height: 50px;
}
#main-right table .top-3 div{
	margin-top:17px;
}
#main-right table div{
	height:17px;
}
#main-right table .play-icon{
	display: inline-block;
	background: url(../img/table.png) no-repeat 0px -103px;
	height: 17px;
	width:17px;
	line-height: 50px;
	float: left;
}
#main-right table .play-icon:hover{
	background-position: 0px -128px;
}
#main-right table .mv-icon{
	display: inline-block;
	background: url(../img/table.png) no-repeat 0px -151px;
	width: 23px;
	height: 17px;
	float: left;
	margin-left: 5px;
}
#main-right table .mv-icon:hover{
	background-position: -30px -151px;
}
#main-right table .song-name{
	display: inline-block;
	height: 17px;
	line-height: 17px;
	float: left;
	margin-left: 10px;
	max-width: 237px;
}
#main-right table .long{
	display: inline-block;
	float: left;
}
#main-right table .icon-list{
	display: none;
	margin:0 0 0 -7px !important;
	white-space: nowrap;
}
#main-right table .icon-list a{
	display: inline-block;
	height: 16px;
	width:18px;
	background: url(../img/table.png) no-repeat 0 9999px;
	float: left;
	margin-left: 3px;
}
#main-right table .icon-list .add-icon{
	height: 13px;
	width:13px;
	background: url(../img/icon3.png) no-repeat 0 -700px;
}
#main-right table .icon-list .add-icon:hover{
	background: url(../img/icon3.png) no-repeat -22px -700px;
}	
#main-right table .icon-list .collect-icon{
	background-position: 0 -174px;
}
#main-right table .icon-list .collect-icon:hover{
	background-position: -20px -174px;
}	
#main-right table .icon-list .share-icon{
	background-position: 0 -195px;
}
#main-right table .icon-list .share-icon:hover{
	background-position: -20px -195px;
}	
#main-right table .icon-list .download-icon{
	background-position: -81px -174px;
}
#main-right table .icon-list .download-icon:hover{
	background-position: -104px -174px;
}	